<template>
	<view>
		<!-- 按钮触发时间选择器 -->
		<u-button type="primary" @click="showPicker = true">{{ buttonText }}</u-button>

		<!-- 显示选择结果 -->
		<view v-if="selectedTime">
			{{ displayLabel }}: {{ selectedTime }}
		</view>

		<!-- 预约时间选择器 -->
		<u-datetime-picker v-model="selectedTime" mode="datetime" title="选择预约时间" :minDate="minDate" :maxDate="maxDate"
			:minHour="8" :maxHour="20" :minute-step="60" :formatter="formatter" :filter="filterTimeOptions"
			@confirm="onConfirm" :show="showPicker" @close="showPicker = false" />
	</view>
</template>

<script>
	export default {
		name: 'DateTimePicker', // 定义组件名
		props: {
			minHour: { type: Number, default: 8 }, // 可定制最小小时
			maxHour: { type: Number, default: 20 }, // 可定制最大小时
			buttonText: { type: String, default: '请选择预约时间' }, // 自定义按钮文本
			displayLabel: { type: String, default: '选择的预约时间' }, // 显示结果的前缀文本
			daysLimit: { type: Number, default: 3 } // 可设置选择天数的限制，默认三天
		},
		data() {
			return {
				showPicker: false, // 控制时间选择器显示
				selectedTime: '', // 存储选择的时间
				minDate: new Date().getTime(), // 当前时间
				maxDate: new Date().getTime() + this.daysLimit * 24 * 60 * 60 * 1000 // 当前时间加天数限制
			};
		},
		onReady() {
			// 微信小程序需要用此写法
			// #ifdef MP
			this.$refs.datetimePicker.setFormatter(this.formatter);
			// #endif
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}点`;
				}
				return value;
			},
			// 过滤时间，只显示整点
			filterTimeOptions(type, options) {
				if (type === 'minute') {
					return options.filter(option => option === 0); // 只显示整点（00 分钟）
				}
				return options;
			},
			// 确认选择
			onConfirm(e) {
				this.selectedTime = e; // 保存选择的时间
				this.showPicker = false; // 关闭时间选择器
				this.$emit('timeSelected', this.selectedTime); // 触发自定义事件通知父组件
			}
		}
	};
</script>

<style scoped>
	/* 你可以在这里添加自定义样式 */
</style>
